<template>
    <el-dialog v-model="show" :title="title">
        <el-form ref="formRef" :model="formData" label-width="100" class="form" :rules="formRule">
            <el-form-item label="品牌名称" prop="tmName">
                <el-input v-model="formData.tmName" />
            </el-form-item>

            <el-form-item label="品牌LOGO" prop="logoUrl" :error="uploadFileError">
                <el-upload class="uploader" :action="uploadFileUrl" :on-success="handleSuccess" :on-error="handleError"
                    :before-upload="handlebeforeUpload" :show-file-list="false">
                    <img v-if="formData.logoUrl" :src="formData.logoUrl" class="avatar" />
                    <el-icon v-else>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <div class="btns">
                <el-button type="primary" @click="close">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>
<script setup lang="ts">
import { reqInsertTrademark, reqUpdateTrademark } from '@/api/product/trademark';
import { uploadFileUrl } from '@/api/request';
import { ElMessage, type FormRules, type UploadProps, type UploadRawFile } from 'element-plus';
import { computed, ref } from 'vue';
const formRef = ref()
const show = ref<boolean>(false)
const { onSuceess } = defineProps<{ onSuceess: (inserted: boolean) => void }>()

const formData = ref<{
    id?: number,
    tmName?: string,
    logoUrl?: string
}>({})

const title = computed(() => {
    if (formData.value.id) {
        return "修改品牌";
    } else {
        return "添加品牌";
    }
})

const uploadFileError = ref<string>()
const handleSuccess: UploadProps['onSuccess'] = async (response: any) => {
    formData.value.logoUrl = response.data
    uploadFileError.value = undefined
}

const handleError: UploadProps['onError'] = async () => {
    ElMessage({ type: 'error', message: '上传失败' })
}

const handlebeforeUpload: UploadProps['beforeUpload'] = async (rawFile: UploadRawFile) => {
    // formRef.value.validateField(["logoUrl"])
    if (rawFile.type !== 'image/jpeg') {
        uploadFileError.value = "请上传品牌LOGO图片"
        return false
    }
    if (rawFile.size > 1024 * 1024 * 5) {
        uploadFileError.value = "请上传品牌LOGO图片需要小于5M"
        return false
    }
    return true
}

const formRule = ref<FormRules<{
    tmName: string,
    logoUrl: string
}>>({
    tmName: [{ required: true, message: "请输入品牌名称", trigger: 'blur' }],
    logoUrl: [{ required: true, message: "请上传品牌LOGO图片" }],
})


const submit = async () => {
    await formRef.value?.validate()
    if (!formData.value.id) {// 新增
        const result = await (await reqInsertTrademark(formData.value)).data
        if (result.ok) {
            ElMessage({ type: "success", message: "添加成功" })
            close()
            onSuceess(true)
        } else {
            ElMessage({ type: "error", message: "添加失败" })
        }
    } else {//修改
        const result = await (await reqUpdateTrademark(formData.value)).data
        if (result.ok) {
            ElMessage({ type: "success", message: "修改成功" })
            close()
            onSuceess(false)
        } else {
            ElMessage({ type: "error", message: result.data })
        }
    }
}


const open = (data?: {
    id?: number,
    tmName?: string,
    logoUrl?: string
}) => {
    formData.value = {
        ...data
    }
    formRef.value?.clearValidate()
    show.value = true
}

const close = () => {
    show.value = false
}


defineExpose({
    open,
    close
})

</script>
<style scoped lang="scss">
.form {
    .el-form-item {
        width: 70%;
    }

    .uploader {

        .avatar {
            width: 178px;

        }

        .el-icon {
            border: 1px dashed var(--el-border-color);
            font-size: 28px;
            color: var(--el-border-color);
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }

    .uploader:hover {

        .el-icon {
            border-color: var(--el-color-primary);
            color: var(--el-color-primary);
        }
    }

    .btns {
        display: flex;
        padding-right: 100px;
        justify-content: flex-end;
    }

}
</style>